<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EDRS</title>
    <link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
    <link rel="stylesheet" href="./css/EDAS.css" type="text/css" />

    <link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
    <style type="text/css">
        .fakeloader {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            z-index: 999;
            background-image: url(../bgAll/img/bg.png);
        }

        .toCenter {
            top: 0;
        }

        .col75 {
            width: 80%;
        }

        html,
        body {
            overflow: hidden;
        }

        .middleBegin {
            background-color: rgba(112, 146, 190, 0.4);
            width: 450px;
            height: 450px;
            transform: rotateX(60deg) rotateZ(45deg);
            -webkit-transform: rotateX(60deg) rotateZ(45deg);
            -moz-transform: rotateX(60deg) rotateZ(45deg);
        }

        .middleDone {
            width: 1000px;
            height: 1000px;
            transform: rotateX(0deg) rotateZ(0deg);
            -webkit-transform: rotateX(0deg) rotateZ(0deg);
            -moz-transform: rotateX(0deg) rotateZ(0deg);
        }

        @-moz-keyframes top2display {
            from {
                top: 0;
                opacity: 0.4;
            }
            to {
                top: -530px;
                opacity: 0;
                display: none;
            }
        }

        @-ms-keyframes top2display {
            from {
                top: 0;
                opacity: 0.4;
            }
            to {
                top: -530px;
                opacity: 0;
                display: none;
            }
        }

        @-webkit-keyframes top2display {
            from {
                top: 0;
                opacity: 0.4;
            }
            to {
                top: -530px;
                opacity: 0;
                display: none;
            }
        }

        @keyframes top2display {
            from {
                top: 0;
                opacity: 0.4;
            }
            to {
                top: -530px;
                opacity: 0;
                display: none;
            }
        }

        @-moz-keyframes bottom2display {
            from {
                top: 390px;
                opacity: 0.4;
            }
            to {
                top: 700px;
                opacity: 0;
                display: none;
            }
        }

        @-ms-keyframes bottom2display {
            from {
                top: 390px;
                opacity: 0.4;
            }
            to {
                top: 700px;
                opacity: 0;
                display: none;
            }
        }

        @-webkit-keyframes bottom2display {
            from {
                top: 390px;
                opacity: 0.4;
            }
            to {
                top: 700px;
                opacity: 0;
                display: none;
            }
        }

        @keyframes bottom2display {
            from {
                top: 390px;
                opacity: 0.4;
            }
            to {
                top: 700px;
                opacity: 0;
                display: none;
            }
        }

        @-moz-keyframes middle2all {
            from {
                width: 450px;
                height: 450px;
                transform: rotateX(60deg) rotateZ(45deg);
                -webkit-transform: rotateX(60deg) rotateZ(45deg);
                -moz-transform: rotateX(60deg) rotateZ(45deg);
            }
            to {
                width: 1000px;
                height: 1000px;
                transform: rotateX(0deg) rotateZ(0deg);
                -webkit-transform: rotateX(0deg) rotateZ(0deg);
                -moz-transform: rotateX(0deg) rotateZ(0deg);
                opacity: 0;
                display: none;
                margin-left: -275px;
                margin-top: -225px;
            }
        }

        @-ms-keyframes middle2all {
            from {
                width: 450px;
                height: 450px;
                transform: rotateX(60deg) rotateZ(45deg);
                -webkit-transform: rotateX(60deg) rotateZ(45deg);
                -moz-transform: rotateX(60deg) rotateZ(45deg);
            }
            to {
                width: 1000px;
                height: 1000px;
                transform: rotateX(0deg) rotateZ(0deg);
                -webkit-transform: rotateX(0deg) rotateZ(0deg);
                -moz-transform: rotateX(0deg) rotateZ(0deg);
                opacity: 0;
                display: none;
                margin-left: -275px;
                margin-top: -225px;
            }
        }

        @-webkit-keyframes middle2all {
            from {
                width: 450px;
                height: 450px;
                transform: rotateX(60deg) rotateZ(45deg);
                -webkit-transform: rotateX(60deg) rotateZ(45deg);
                -moz-transform: rotateX(60deg) rotateZ(45deg);
            }
            to {
                width: 1000px;
                height: 1000px;
                transform: rotateX(0deg) rotateZ(0deg);
                -webkit-transform: rotateX(0deg) rotateZ(0deg);
                -moz-transform: rotateX(0deg) rotateZ(0deg);
                opacity: 0;
                display: none;
                margin-left: -275px;
                margin-top: -225px;
            }
        }

        @keyframes middle2all {
            from {
                width: 450px;
                height: 450px;
                transform: rotateX(60deg) rotateZ(45deg);
                -webkit-transform: rotateX(60deg) rotateZ(45deg);
                -moz-transform: rotateX(60deg) rotateZ(45deg);
            }
            to {
                width: 1000px;
                height: 1000px;
                transform: rotateX(0deg) rotateZ(0deg);
                -webkit-transform: rotateX(0deg) rotateZ(0deg);
                -moz-transform: rotateX(0deg) rotateZ(0deg);
                opacity: 0;
                display: none;
                margin-left: -275px;
                margin-top: -225px;
            }
        }

        .cacheFloor {
            top: 138px;
        }
    </style>

</head>

<body class="wrap">

<div class="fakeloader"></div>

<div class="mod-star-list">
    <div class="inner"></div>
</div>
<!-- header Start -->
<div id="header" class="mt12 clearfix" style="margin-left:10px">
    <div class="header-left">
        <a href="../MQ/index.html" class="clearfix">
            <div class="bg-next rotate5 btn"></div>
            <p>浏览下一个产品</p>
        </a>
    </div>
    <div class="header-right">
        <div class="header-open">企业级分布式应用服务<span style="color:#90b8f1;font-size:14px">EDAS</span>
            <p>
                Enterprise Distributed App Service</p>
        </div>
    </div>
</div>
<!-- header End -->
<div class="content" style="height: 100%;width: 100%;">
    <style>
        .boxZone {
            width: 100%;
            height: 100%;
        }

        .boxZone .boxCanvas {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            height: 420px;
            width: 800px;
            margin: auto;
            background-image: url('img/side.png');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .boxCanvas > div {
            position: absolute;
        }

        .boxCanvas .bigBox {
            height: 180px;
            width: 180px;
            background-image: url('img/bigcube.png');
            background-size: 180px 180px;
            left: 50px;
            top: -50px;
        }

        .boxCanvas .cubeBox {
            height: 100px;
            width: 100px;
            background-image: url('img/cube.png');
            background-size: 100px 100px;
        }

        .box1 {
            left: 360px;
            top: 40px;
        }

        .box2 {
            left: 240px;
            top: 100px;
        }

        .box3 {
            left: 125px;
            top: 160px;
        }

        .box4 {
            left: 360px;
            top: 160px;
        }

        .box5 {
            left: 480px;
            top: 105px;
        }

        .box6 {
            left: 240px;
            top: 225px;
        }

        .box7 {
            left: 520px;
            top: 200px;
        }

        .box8 {
            left: 400px;
            top: 260px;
        }

        .boxZone .box-canvas {
            position: absolute;
            height: 420px;
            width: 800px;
            left: calc(50% - 400px);
            top: calc(50% - 210px);
        }

        @keyframes boxShake {
            0% {
                transform: rotateX(10deg) rotateY(0deg);
            }
            10% {
                transform: rotateX(-10deg) rotateY(-10deg);
            }
            20% {
                transform: rotateX(-10deg) rotateY(10deg);
            }
            30% {
                transform: rotateX(10deg) rotateY(10deg);
            }
            40% {
                transform: rotateX(-10deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(9deg) rotateY(8deg);
            }
            60% {
                transform: rotateX(-1deg) rotateY(-7deg);
            }
            70% {
                transform: rotateX(8deg) rotateY(2deg);
            }
            75% {
                transform: rotateX(-6deg) rotateY(-7deg);
            }
            80% {
                transform: rotateX(7deg) rotateY(6deg);
            }
            83% {
                transform: rotateX(-6deg) rotateY(-7deg);
            }
            86% {
                transform: rotateX(7deg) rotateY(5deg);
            }
            90% {
                transform: rotateX(1deg) rotateY(-6deg);
            }
            92% {
                transform: rotateX(-7deg) rotateY(0deg);
            }
            95% {
                transform: rotateX(6deg) rotateY(-5deg);
            }
            97% {
                transform: rotateX(-3deg) rotateY(2deg);
            }
            100% {
                transform: rotateX(0deg) rotateY(0deg);
            }
        }
    </style>
    <!-- 动画2 begin -->
    <div class="toCenter boxZone" style="">
        <div class="boxCanvas">
            <div class="cubeBox box1 shineAction"></div>
            <div class="cubeBox box2 shineAction"></div>
            <div class="cubeBox box3 shineAction"></div>
            <div class="cubeBox box4 shineAction"></div>
            <div class="cubeBox box5 shineAction"></div>
            <div class="cubeBox box6 shineAction"></div>
            <div class="cubeBox box7 shineAction"></div>
            <div class="cubeBox box8 shineAction" style="display: none;"></div>
            <div class="bigBox"></div>
        </div>
        <div id="test" width="800" height="600" class="box-canvas"></div>
        <!--<canvas id="main" width="800" height="600"></canvas>-->
    </div>
    <!-- 动画2 end -->
</div>
<footer class="clearfix">
    <div class="footer-left fl">
        <a href="index.html?goods=goods1" class="back shineAction"></a>
        <div class="backText">返回主菜单</div>
    </div>
    <div class="footer-right fr">
        <a href="" class="refresh shineAction"></a>
        <div class="refreshText">刷新&nbsp;</div>
    </div>
</footer>
</body>
<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript" src='./js/common.js'></script>

<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript" src='../bgAll/js/star.js'></script>
<script type="text/javascript" src='js/EDAS.js'></script>
<script type="text/javascript" src='js/echarts.min-all.js'></script>
<script type="text/javascript" src="js/china.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

</script>

</html>